<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker v-model="listQuery.date" type="monthrange" align="right" unlink-panels range-separator="至"
        start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
      </el-date-picker>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>
    <div class="dashboard-editor-container">
      <receive :receive="receive" />
      <pay :pay="pay" />
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>
  </div>
</template>

<script>
  import Receive from './components/receive'
  import Pay from './components/pay'
  import LineChart from './components/LineChart'
  import {
    getReportFinanceData
  } from '@/api/report'

  const lineChartData = {
    newVisitis: {
      receiveData: [],
      payData: [],
      costData: [],
      rateData: [],
      fineData: [],
      profitData: [],
      monthData: []
    }
  }

  export default {
    name: 'DashboardAdmin',
    components: {
      Receive,
      Pay,
      LineChart
    },
    filters:{
    	formatDate1(time) {
    	        time = time
    	        let date = new Date(time)

    	        return formatDate(date, 'yyyy-MM')
    	      }
    },
    data() {
      return {
        listQuery: {
          date: [],
        },
        receive: [],
        pay: [],
        pickerOptions: {
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        lineChartData: lineChartData.newVisitis
      }
    },
    created() {
      let dt = new Date();
      dt.setDate(1)
      let start_time=dt.setMonth(dt.getMonth()-11)
      let end_time=dt.setMonth(dt.getMonth()+11)
      let end_month=new Date(end_time).getMonth()+1;
       let end= new Date(end_time).getFullYear()+"-"+ end_month
       let start_month=new Date(start_time).getMonth()+1;
       let start= new Date(start_time).getFullYear()+"-"+ start_month
      this.listQuery.date.push(start)
      this.listQuery.date.push(end)
      this.getReportFinanceData()
    },
    methods: {
      getReportFinanceData() {
        getReportFinanceData(this.listQuery).then(resp => {
          this.pay = resp.data.pay
          this.receive = resp.data.receive
          this.lineChartData.receiveData=resp.data.line.receiveData
          this.lineChartData.payData=resp.data.line.payData
          this.lineChartData.costData=resp.data.line.costData
          this.lineChartData.rateData=resp.data.line.rateData
          this.lineChartData.fineData=resp.data.line.fineData
          this.lineChartData.profitData=resp.data.line.profitData
          this.lineChartData.monthData=resp.data.line.monthData
          //console.log(this.receive)
        })
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      handleFilter() {
          this.getReportFinanceData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
